<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>行情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/liveapp.css" />
		<script type="text/javascript" src="../js/iconfont.js"></script>
		<style>
			.iconzs {
				width: 0.8em;
				height: 0.8em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
			
			body {
				background: #FFFFFF;
			}
			
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			#hqtit {
				padding: 6px 15px;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				background-color: #fed700;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
				border-bottom: 0px;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item {
				height: 550px;
			}
			/*行情*/
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #fed700;
			}
			
			.hqtable {
				width: 100%;
				text-align: center;
			}
			
			.hqp2 {
				padding-left: 0px;
			}
			
			.hqp {
				font-size: 18px;
			}
			
			.hqp.r {
				color: #ee0d0d;
			}
			
			.hqp.g {
				color: #189715;
			}
			
			.mui-slider-indicator {
				position: absolute;
				bottom: 8px;
				width: 100%;
				text-align: center;
				background: #ffff;
			}
			
			.left {
				float: left;
			}
			
			
			.mui-card .mui-table-view {
    margin-bottom: 0;
    border-top: 0;
    border-bottom: 0;
    border-radius: 0px;
}

.mui-card {
    font-size: 14px;
    position: relative;
    overflow: hidden;
    margin: 0px;
    border-radius: 0px;
    background-color: rgba(0,0,0,0);
    background-clip: padding-box;
    box-shadow: 0 0px 0px rgba(0,0,0,0);
    margin-bottom: 10px;
}

.mui-search .mui-placeholder {
    font-size: 16px;
    line-height: 44px;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: inline-block;
    height: 34px;
    text-align: center;
    color: #999;
    border: 0;
    border-radius: 6px;
    background: 0 0;
}

.mui-bar .mui-search:before {
    margin-top: -22px;
}
.mui-bar .mui-input-row .mui-input-clear~.mui-icon-clear, .mui-bar .mui-input-row .mui-input-speech~.mui-icon-speech {
    top: 12px;
    right: 12px;
}
		</style>
		<header class="mui-bar mui-bar-nav">
			
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">
					<div class="mui-input-row mui-search" id="sstext">
				
					<input type="search" class="mui-input-clear" placeholder="输入合约代码/拼音/首字母">
			</div></h1>
			
			<button type="button" class="mui-right mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-right">
					<span >
						搜索
					</span>
				</button>
			
			</div>
			
			
			
		</header>
		<div class="mui-content">
			
			<div id="slider" class="mui-slider">
				
				
					<div class="mui-slider-group">
						<div class="mui-card">
						<ul class="mui-table-view">
							
							<li class="mui-table-view-cell">

								<table class="hqtable">
									<tr>
										
										<td class="hqp1 mui-col-xs-2">
											<h4>黄金延期</h4>
											
										</td>

										<td class="hqp3 mui-col-xs-4 hqp r"><p class="hqp2">Au（T+D）</p></td>
										<td class="hqp3 mui-col-xs-4 hqp r">280.40</td>
										<td class="hqp1 mui-col-xs-2">
											<span class="mui-icon">	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-shanchu"></use>
								</svg>
		                   	 </span>
										</td>

									</tr>
								</table>

							</li>

								<li class="mui-table-view-cell">

								<table class="hqtable">
									<tr>
										
										<td class="hqp1 mui-col-xs-2">
											<h4>黄金延期</h4>
											
										</td>

										<td class="hqp3 mui-col-xs-4 hqp r"><p class="hqp2">Au（T+D）</p></td>
										<td class="hqp3 mui-col-xs-4 hqp r">280.40</td>
										<td class="hqp1 mui-col-xs-2">
											<span class="mui-icon">	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-shanchu"></use>
								</svg>
		                   	 </span>
										</td>

									</tr>
								</table>

							</li>
							
								<li class="mui-table-view-cell">

								<table class="hqtable">
									<tr>
										
										<td class="hqp1 mui-col-xs-2">
											<h4>黄金延期</h4>
											
										</td>

										<td class="hqp3 mui-col-xs-4 hqp r"><p class="hqp2">Au（T+D）</p></td>
										<td class="hqp3 mui-col-xs-4 hqp r">280.40</td>
										<td class="hqp1 mui-col-xs-2">
											<span class="mui-icon">	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-shanchu"></use>
								</svg>
		                   	 </span>
										</td>

									</tr>
								</table>

							</li>
							
								<li class="mui-table-view-cell">

								<table class="hqtable">
									<tr>
										
										<td class="hqp1 mui-col-xs-2">
											<h4>黄金延期</h4>
											
										</td>

										<td class="hqp3 mui-col-xs-4 hqp r"><p class="hqp2">Au（T+D）</p></td>
										<td class="hqp3 mui-col-xs-4 hqp r">280.40</td>
										<td class="hqp1 mui-col-xs-2">
											<span class="mui-icon">	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-tianjia"></use>
								</svg>
		                   	 </span>
										</td>

									</tr>
								</table>

							</li>

						</ul>

					</div>
					
					
					
					
					
				

				</div>

			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
				var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li></ul>';
				var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li></ul>';
				var html4 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第4444个选项卡子项-1</li></ul>';
				var item2 = document.getElementById('item2mobile');
				var item3 = document.getElementById('item3mobile');
				var item4 = document.getElementById('item4mobile');
				document.getElementById('slider').addEventListener('slide', function(e) {
					if(e.detail.slideNumber === 1) {
						if(item2.querySelector('.mui-loading')) {
							setTimeout(function() {
								item2.querySelector('.mui-scroll').innerHTML = html2;
							}, 500);
						}
					} else if(e.detail.slideNumber === 2) {
						if(item3.querySelector('.mui-loading')) {
							setTimeout(function() {
								item3.querySelector('.mui-scroll').innerHTML = html3;
							}, 500);
						}
					} else if(e.detail.slideNumber === 3) {
						if(item4.querySelector('.mui-loading')) {
							setTimeout(function() {
								item4.querySelector('.mui-scroll').innerHTML = html4;
							}, 500);
						}
					}
				});
				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if(this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);
		</script>

		</body>

</html>